<template>
  <el-dialog
    v-model="visible"
    title="附件上传"
    width="800"
    show-footer
    show-zoom
    resize
    @close="close"
    :z-index="2000"
  >
    <div class="flex justify-between uploadBox">
      <VUpload
        :limit="999"
        :validator="validator"
        type="file"
        :progress="true"
        :multiple="true"
        @success="success"
      >
        <el-button type="primary" link class="flex items-center">
          <svg-icon icon-class="Plus"></svg-icon>
          上传文件
        </el-button>
      </VUpload>
    </div>
    <div class="w-full py-2">
      <vxe-table
        border
        show-overflow
        :data="fileList"
        :column-config="{ resizable: true }"
        :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }"
      >
        <vxe-column type="seq" title="序号" width="60"></vxe-column>
        <vxe-column field="filename" title="文件名称">
          <template #edit="{ row }">
            {{ row.filename }}
          </template>
        </vxe-column>
        <vxe-column field="certificate_type" title="文件类型">
          <template #default="{ row }">
            <el-select
              v-model="row.type"
              collapse-tags
              placeholder="请选择"
              clearable
              style="width: 148px"
            >
              <el-option
                v-for="item in options['assignment.ImagesAssignment']?.[0].typeText"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </template>
        </vxe-column>

        <!-- <vxe-column field="remark" title="绑定SKU">
          <template #default="{ row }">
            <el-select class="w-full" v-model="row.sku" clearable multiple collapse-tags placeholder="请选择">
              <el-option v-for="item in SKUList" :label="item" :value="item" :key="item" />
            </el-select>
          </template>
        </vxe-column> -->
        <vxe-column field="operation" title="操作">
          <template #default="{ row }">
            <el-button type="danger" @click="deleteRow(row, index)">删除</el-button>
          </template>
        </vxe-column>
      </vxe-table>
    </div>
    <template #footer>
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" :loading="loading" @click="submitUpload()"
        >上 传</el-button
      >
    </template>
  </el-dialog>
</template>
<script setup name="ComModal">
import { ref, computed, toRefs } from "vue";
import VUpload from "@/components/VUpload/index.vue";

import { ElMessage } from "element-plus";
const emit = defineEmits(["uploadFile"]);
let options = reactive(inject("options"));

const visible = ref(false);
const loading = ref(false);

const certificate = ref(null);
const fileList = ref([]);
const SKUList = ref([]);

const open = (sku) => {
  SKUList.value = sku;
  fileList.value = [];
  visible.value = true;
};
const success = (obj) => {
  fileList.value.push({
    filename: obj.filename,
    filepath: obj["data-show-file"],
    type: "",
  });
};

// 上传校验
const validator = (fileInfo) => {
  return (() => {})();
};
// 文件上传
const submitUpload = () => {
  emit("uploadFile", fileList.value);
  close();
};

const close = () => {
  visible.value = false;
};
defineExpose({ open });
</script>
<style lang="scss" scoped>
.uploadBox {
  min-height: 52px;
  border-radius: 4px;
  border: 1px dashed #3366f1;
  justify-content: center;
  align-items: center;

  .v-upload {
    width: 100%;
    height: 100%;

    :deep(.el-upload) {
      width: 100%;
      height: 52px;
    }
  }
}

.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.upload-file-uploader {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100%;
  height: 178px;
  text-align: center;
  border: 1px dashed var(--el-border-color);
  display: inline-block;
  display: flex;
  justify-content: center;
  align-items: center;
}

:deep(.el-upload-list) {
  width: 100%;
  display: flex;
  flex-direction: column;

  .el-upload-list__item {
    width: 100%;
    padding: 3px 50px;
  }
}
</style>
